<template>
  <el-container class="data-export">
    <el-header>
      <Header ref="header" title="_act_o_record" :isSimMainWin="false" />
    </el-header>
    <el-main>
      <div class="_export_table_box">
        <el-table
          :empty-text="$t('_no_data')"
          border
          :data="tableData"
          :max-height="tableMaxHeight"
        >
          <el-table-column align="center" prop="id" width="50" :label="$t('_num')" />
          <el-table-column align="center" prop="action" :label="$t('_f_action')" />
          <el-table-column align="center" prop="behavior" :label="$t('_b_name')" />
          <el-table-column align="center" prop="owner" :label="$t('_owner')" />
          <el-table-column align="center" prop="outname" :label="$t('_o_name')" />
          <el-table-column align="center" prop="outtype" :label="$t('_o_t')" />
          <el-table-column align="center" prop="outcon" :label="$t('_o_c')" />
          <el-table-column align="center" prop="action2" :label="$t('_s_action')" />
          <el-table-column align="center" prop="behavior2" :label="$t('_b_name')" />
          <el-table-column align="center" prop="inname" :label="$t('_i_name')" />
          <el-table-column align="center" prop="intype" :label="$t('_i_t')" />
          <el-table-column align="center" prop="incom" :label="$t('_i_c')" />
        </el-table>
        <div class="_button_box">
          <el-button size="small" @click="doCanCel">{{$t('cancel')}}</el-button>
          <el-button size="small" :disable="isExportDisable" @click="doExport">{{$t('export')}}</el-button>
        </div>
      </div>
    </el-main>
  </el-container>
</template>
<script lang="ts" setup>
import { ref, onMounted, reactive, provide, nextTick } from "vue";
import Header from "@/components/Header.vue";
import type { ElTable } from "element-plus";
import { throttle } from "lodash";
import { useI18n } from "vue-i18n";
import { ipcRenderer } from "electron";
import { controller } from "@/engine/Controller";
import { SimFrameToSubChannel, SimSubwinMsgToSimWin } from "@/engine/types/Win";

provide('handleHeadClose', () => {
  doCanCel();
});

const { t } = useI18n();

let tabBody = document.querySelector('.el-table__body');
let scrollDom: Element | null = null;

const tableData: any[] = reactive([]);
const header = ref(null);
const isExportDisable = ref(false);

const doExport = async () => {
  isExportDisable.value = true;
  const savePath = await controller.winService.chooseSavePath(controller.locale.localeTrans('_save_location'), controller.locale.localeTrans('_active_pin_record'));
  if (savePath) {
    controller.docxService.docxSaveTableToWord(savePath, tableData);
  }
  isExportDisable.value = false;
};

const doCanCel = () => {
  app.$messageBox(
    t('_close_act_record'),
    t('warning'),
    {
      confirmButtonText: t('yes'),
      cancelButtonText: t('no'),
      type: "warning",
      closeOnClickModal: false
    },
    () => {
      controller.winService.simSubWinSendInfoToSimWin({ type: SimSubwinMsgToSimWin.ExportActPinDataClose });
      (header.value as any).headerClose();
    }
  );
};

const tableMaxHeight = ref(500);

const ActChangeExportInfoHandle = async (event: Event, data: any) => {
  if (!tableData.length || tableData[tableData.length - 1].id < data.id) {
    tableData.push(data);
  } else {
    for (const [index, item] of tableData.entries()) {
      if (item.id === data.id) { // replace
        tableData.splice(index, 1, data);
        break;
      }
    }
  }
  nextTick(() => {
    if (!scrollDom) {
      scrollDom  = document.querySelector('.el-table__body-wrapper');
    }
    if (!tabBody) {
      tabBody = document.querySelector('.el-table__body');
    }
    scrollDom?.scroll({
      top: tabBody?.clientHeight
    });
  });
};

onMounted(async () => {
  window.onresize = throttle(() => {
    tableMaxHeight.value = document.body.clientHeight > 200 ? document.body.clientHeight - 100 : 200;
  }, 500);
  ipcRenderer.on(SimFrameToSubChannel.ActChangeExportInfo, ActChangeExportInfoHandle);
  ipcRenderer.on(SimFrameToSubChannel.SimInit, () => {
    tableData.length = 0;
  });
  const consoleActiveExportSetRes = (await controller.simApi.consoleActiveExportSet(true)).data?.data;
  console.info('export switch is: ', consoleActiveExportSetRes);
});

</script>
<style lang="scss" scoped>
.data-export {
  height: 100%;
}
.data-export > .el-header {
  --el-header-padding: 0px;
  --el-header-height: 28px;
}
.el-main {
  --el-main-padding: 1em;
  overflow: hidden;
}
._export_table_box {
  width: 96%;
  margin: 0 auto;
  max-height: calc(100% - 60px);
  position: relative;
}
._button_box {
  width: 480px;
  display: flex;
  justify-content: space-between;
  position: absolute;
  bottom: -58px;
  left: calc(50% - 240px);
}
</style>
